<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <c:if test="${empty admin}">
        <%--非法访问--%>
        <c:redirect url="${APP_PATH}/adminLogin"/>
    </c:if>
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">

    <link rel="stylesheet" href="${APP_PATH}/static/css/input-image-upload.css">
</head>
<body>

<jsp:include page="${APP_PATH}/common/admin/head-area.jsp"/>
<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <%--查看表单--%>
    <div class="my-3 p-4 bg-white rounded">
        <div>
            <a id="btn-edit" class="btn btn-sm btn-info ml-0 mr-2">编辑</a>
            <a id="btn-return" class="btn btn-sm btn-info mr-2" style="display: none">返回</a>
            <a id="btn-del" class="btn btn-sm btn-danger mr-2">删除</a>
        </div>
        <div id="viewArea" class="my-2">
            <form>
                <div class="form-group">
                    <img src="${area.imgurl}" style="object-fit: cover" width="80px" height="80px">
                </div>
                <div class="form-group input-group-sm">
                    <label class="border-bottom border-dark">编程语言</label>
                    <p class="p-2">${area.areaname}</p>
                </div>

                <div class="form-group">
                    <label class="border-bottom border-dark">描述</label>
                    <p class="p-2">${area.description}</p>
                </div>

            </form>
        </div>

        <div id="updateArea" style="display: none">
            <form enctype="multipart/form-data">
                <div class="form-group input-group-sm">
                    <label for="areaname">编程语言</label>
                    <input type="text" class="form-control col-lg-3 col-md-12" maxlength="20" id="areaname" name="areaname"
                           value="${area.areaname}">
                </div>

                <div class="form-group">
                    <label for="description">描述</label>
                    <textarea class="form-control" maxlength="1024" rows="4" id="description"
                              name="description">${area.description}</textarea>
                </div>

                <input type="hidden" id="imgurl" name="imgurl" value="${area.imgurl}">
                <input type="hidden" id="id" name="id" value="${area.id}">
            </form>
            <div class="form-group">
                <div id="viewCurrentImg">
                    <label>当前图标</label>

                    <div class="ml-0 pl-0">
                        <img src="${area.imgurl}" style="object-fit: cover" width="80px" height="80px">
                    </div>
                    <a id="btn-replace-img" class="btn btn-sm btn-outline-danger mt-2">更换图标</a>
                </div>
                <%--用户点击更换图标，显示--%>
                <div id="updateImg" style="display: none">
                    <label for="uploaderInput">请选择新的图标</label>
                    <div style="clear: both"></div>
                    <div class="input-image-uploader">
                        <ul class="input-image-files pl-0" id="uploaderFiles">

                        </ul>
                        <div class="input-image-box">
                            <input id="uploaderInput" class="input-image" type="file" name="files" accept="image/*">
                        </div>
                    </div>
                    <div style="clear: both"></div>
                    <a id="btn-return-viewCurrentImg" class="btn btn-sm btn-outline-primary mt-2">取消更改</a>
                    <a id="btn-save" class="btn btn-sm btn-outline-info mt-2 disabled" data-flag="false">保存图片</a>
                </div>
                <a id="btn-submit" class="btn btn-sm btn-success mt-2" data-flag="false">提交</a>
            </div>
        </div>
    </div>
</div>
<div class="p-4"></div>
<!--图片预览-->
<div class="my-gallery" id="gallery" style="display: none">
    <span class="my-gallery-img" id="galleryImg"></span>
    <div class="my-gallery-option">
        <a href="javascript:void(0);" class="my-gallery-option-icon pt-2 pb-1">
            <i id="icon-delete" class="fa fa-trash-alt fa-2x" style="color: white"></i>
        </a>
    </div>
</div>
<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>


<script>
    //点击编辑按钮
    $("#btn-edit").click(function () {
        $("#viewArea").hide();
        $("#updateArea").show();
        //隐藏该按钮，显示返回按钮
        $("#btn-edit").hide();
        $("#btn-return").show();
    })

    //点击返回按钮
    $("#btn-return").click(function () {
        $("#viewArea").show();
        $("#updateArea").hide();
        //隐藏该按钮，显示编辑按钮
        $("#btn-edit").show();
        $("#btn-return").hide();
    })

    //点击更换图标按钮
    $("#btn-replace-img").click(function () {
        //将当前图标显示div隐藏，显示更改图标div
        $("#viewCurrentImg").hide();
        $("#updateImg").show();
    });
    //点击取消更改按钮
    $("#btn-return-viewCurrentImg").click(function () {
        $("#viewCurrentImg").show();
        $("#updateImg").hide();
    })


    $(function () {
        var $gallery = $("#gallery"),
            $galleryImg = $("#galleryImg"),
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles");
        var lil = "";

        //添加图片
        $uploaderInput.on("change", function (e) {
            var src;  //用于图片显示的地址
            var url = window.URL || window.webkitURL || window.mozURL;  //本地地址，用于图片显示的绝对地址
            var files = e.target.files;  //选取的图片文件
            var file = files[0];
            // 过滤掉非图片类型文件
            if (file.type.match('image.*')) {
                if (url) {
                    src = url.createObjectURL(file);
                } else {
                    src = e.target.result;
                }
                var tmpl = '';
                //动态创建li标签，用于显示符合的图片
                tmpl += '<li class="input-image-file"' + 'id="' + file.name + '" style="background-image:url(' + src + ')"></li>';
                $uploaderFiles.append(tmpl);
                ++lil;  //把创建的li标签加1，用于判断图片是否到达规定数目
            }
            //做判断，如果图片达到9张
            if (lil >= 1) {
                $('.input-image-box').css('display', 'none');
                $("#btn-save").attr("data-flag", "true");
                $("#btn-save").removeClass("disabled");
            } else {
                $('.input-image-box').css('display', 'block');
            }

        });


        var index;
        var tid;

        //预览图片
        $uploaderFiles.on("click", "li", function () {
            index = $(this).index();
            tid = $(this).attr("id");
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });

        $gallery.on("click", function () {
            $gallery.fadeOut(100);
        });

        //删除图片
        $("#icon-delete").click(function () {
            $("#uploaderInput").val('');
            //删除该图片的节点
            $uploaderFiles.find("li").eq(index).remove();
            --lil;   //存储li标签的个数减1
            //做判断，如果图片到达9张

            $('.input-image-box').css('display', 'block');
            if (lil < 1) {
                //修改保存按钮属性
                $("#btn-save").attr("data-flag", "false");
                $("#btn-save").addClass("disabled");
            }


        });

        //上传图片
        $("#btn-save").click(function () {
            //上传图片
            if ($("#btn-save").attr('data-flag') === 'true') {
                //js获取图片对象
                var formFile = new FormData();
                formFile.append("files", document.getElementById("uploaderInput").files[0]);
                $.ajax({
                    url: "/filesUpload",
                    data: formFile,
                    type: "POST",
                    dataType: "json",
                    cache: false,//上传文件无需缓存
                    processData: false,//用于对data参数进行序列化处理 这里必须false
                    contentType: false, //必须
                    success: function (result) {
                        //接收返回的图片路径
                        if (result.code === 100) {
                            //图片上传成功
                            $("#imgurl").val(result.extend.fileList.index0);
                            $("#btn-submit").attr('data-flag', 'true');

                            //隐藏取消更改按钮
                            $("#btn-return-viewCurrentImg").hide();
                            toastr.success("图片上传成功！");
                        } else {
                            toastr.success("图片上传失败，请重试！！！");
                        }
                    }
                })
            } else {
                toastr.error("请先选择图片");
            }
        })

        //提交
        $("#btn-submit").click(function () {
            if ($("#areaname").val().length < 1) {
                toastr.error("请填写编程语言");
                return false;
            }
            if ($("#description").val().length < 10) {
                toastr.error("请填写较详细的描述");
                return false;
            }
            if ($("#imgurl").val()) {
                $.ajax({
                    url: '/adminUpdateArea',
                    method: "POST",
                    data: $("form").serialize(),
                    success: function (result) {
                        if (result.code === 100) {
                            toastr.success("修改成功");
                            window.location.href = '/adminArea';
                        } else {
                            toastr.error(result.extend.error);
                        }
                    }
                });
            } else {
                toastr.error("请先上传图标，谢谢！！");
            }
        })


        //删除领域
        $("#btn-del").click(function () {
            //弹出确认框
            if (confirm("您确认要删除该领域吗，此操作不可逆！")) {
                //获取id
                var id=$("#id").val();
                $.ajax({
                    url: '/adminDelArea',
                    data: {id:id},
                    type: 'POST',
                    success: function (result) {
                        if (result.code === 100) {
                            toastr.success("删除成功！！");
                            window.location.href = "/adminArea";
                        }else{
                            toastr.error("删除失败，请稍后重试！！");
                        }
                    }
                })
            }
        })

    });
</script>
</body>

</html>
